<template>
  <div>
    <vxe-form title-align="left" title-width="90" :data="config">
<!--            <vxe-form-item title="条件组关系"  field="groupsType" :item-render="{}">-->
<!--              <template #default="{ data }">-->
<!--                <vxe-switch v-model="data.groupsType" :open-value="'AND'" :close-value="'OR'"-->
<!--                            open-label="且" close-label="或">>-->
<!--                </vxe-switch>-->
<!--              </template>-->
<!--            </vxe-form-item>-->
<!--      <vxe-form-item title="条件表达式" field="expression" :item-render="{}" span="24">-->
<!--        <template #default="{ data }">-->
<!--          <vxe-textarea rows="5" v-model="data.expression" placeholder="输入条件组关系表达式"/>-->
<!--        </template>-->
<!--      </vxe-form-item>-->
    </vxe-form>
    <div>
      <vxe-button status="primary" icon="vxe-icon--plus" style="margin: 0 15px 15px 0" round @click="addConditionGroup">
        添加条件组
      </vxe-button>
      <a-tag color="cyan">只有必填选项才能作为审批条件</a-tag>
    </div>
    <group-item></group-item>
  </div>
</template>

<script>
// import draggable from "vuedraggable";
import GroupItem from "./ConditionGroupItemConfig.vue"

export default {
  name: "ConditionNodeConfig",
  components: {
    // draggable,
     GroupItem},
  props: {
    config: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  mounted() {
  },
  computed: {
    selectedNode() {
      return this.$store.state.flow.selectedNode
    },
    select() {
      return this.config.assignedUser || []
    },
    nowNodeLeave() {
      return this.prioritySortList.indexOf(this.selectedNode)
    },
    //条件节点
    prioritySortList() {
      let node = this.$store.state.flow.nodeMap.get(this.selectedNode.parentId)
      if (node) {
        return node.branchs || []
      }
      return []
    }
  },
  data() {
    return {
      suspensionState: '1',
      sortOption: {
        animation: 300,
        chosenClass: 'choose',
        scroll: true,
        sort: true
      }
    }
  },
  methods: {
    changeGroupsType(v) {
      // this.groupsType = v.value
      // this.$set(this.config, 'groupsType', v.value)
    },
    addConditionGroup() {
      this.config.groups.push({
        cids: [],
        groupType: "OR",
        conditions: []
      })
    },
    selectUser() {
      this.showOrgSelect = true
    },
    selected(select) {
      this.showOrgSelect = false
      select.forEach(val => this.select.push(val))
    },
    removeOrgItem(index) {
      this.select.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.choose {
  border-radius: 5px;
  margin-top: 2px;
  background: #f4f4f4;
  border: 1px dashed #1890FF !important;
}

.drag-hover {
  color: #1890FF
}

.drag-no-choose {
  cursor: move;
  background: #f8f8f8;
  border-radius: 5px;
  margin: 5px 0;
  height: 25px;
  line-height: 25px;
  padding: 5px 10px;
  border: 1px solid #ffffff;

  div {
    display: inline-block;
    font-size: small !important;
  }

  div:nth-child(2) {
    float: right !important;
  }
}
</style>
